<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<body>
    <div>
        <div>
            <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p1" src="../image/Team-Members2.0.png" style="height: 350px;float: left;"></image>
            </div>
            <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p2" src="../image/Team-Attributions2.0.png" style="height: 350px;float: left;"></image>
            </div>
            <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p3" src="../image/Team-Collaborations2.0.png" style="height: 350px;float: left;"></image>
            </div>
            <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p4" src="../image/Team-Partnership2.0.png" style="height: 350px;float: left;"></image>
            </div>
        </div>
        <div style="z-index: 99;position: absolute;">
            <image src="../image/Members.png" style="margin-top: -150px;margin-left: 250px;"> </image>
        </div>
        <div>
            <div id="m1" style="width: 250px;height: 350px;z-index: 999999;position: absolute;float:left"></div>
            <div id="m2"
                style="width: 250px;height: 350px;z-index: 999999;position: absolute;float:left;margin-left: 24%;">
            </div>
            <div id="m3"
                style="width: 250px;height: 350px;z-index: 999999;position: absolute;float:left;margin-left: 49%;">
            </div>
            <div id="m4"
                style="width: 250px;height: 350px;z-index: 999999;position: absolute;float:left;margin-left: 74%;">
            </div>
        </div>
    </div>
</body>

<script>

    $(document).ready(function () {
        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg2").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p3").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg3").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p4").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg4").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");
                //1
                $("#p1").attr("style", "height: 400px;width:400px;float: left;	transition: all 0.3s;	");
                $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 350px;transition: all 0.3s;");
            },

        ),
        $("#m2").mouseover(
            function () {
                $("#p1").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p3").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg3").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p4").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg4").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");
                //2
                $("#p2").attr("style", "height: 400px;width:400px;float: left;transition: all 0.3s;");
                $("#bg2").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 350px;transition: all 0.3s;");
            },
        ),
        $("#m3").mouseover(
            function () {
                $("#p1").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p2").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg2").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p4").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg4").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");
                //3
                $("#p3").attr("style", "height: 400px;width:400px;float: left;transition: all 0.3s;");
                $("#bg3").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 350px;transition: all 0.3s;");
            },
        ),
        $("#m4").mouseover(
            function () {
                $("#p1").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p2").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg2").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");

                $("#p3").attr("style", "height: 350px;float: left;transition: all 0.3s;");
                $("#bg3").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 350px;transition: all 0.3s;");
                //4
                $("#p4").attr("style", "height: 400px;width:400px;float: left;transition: all 0.3s;");
                $("#bg4").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 350px;transition: all 0.3s;");
            },
        )
    
    });
</script>

</html>